$(function () { // 页面加载事件
  // 通过cookie获取用户名
  let username = getCookie('username');
  if (!username) { // 未登录
    let index = layer.msg('请先登录', {
      shade: [.7, '#666']
    });
    setTimeout(() => {
      layer.close(index);
      location.href = './login.html';
    }, 1000);
  }

  // 用户已经登录
  // 获取购物车的数据
  let cartData = localStorage.getItem('data');
  if (!cartData) {
    $('.cart>.content').html(`<div style="padding-left:10px;" class="jumbotron">
        <h1>你没有什么要买嘛？</h1>
        <p>赶快去列表页挑选商品吧</p>
        <p><a class="btn btn-default btn-lg" href="list.html" role="button">去列表页</a></p>
        </div>`);
  } else {
    // 判断本地购物车中是否有用户的数据
    let cartArr = JSON.parse(cartData);
    // 取出用户在购物车中的商品id
    let goodsIds = cartArr.map(v => {
      if (v.username === username) {
        return v.goodsId;
      }
    })
    // 去除goodsIds中的undefined
    let gids = goodsIds.filter(v => v !== undefined);
    // 判断gids是否是空数组
    if (gids.length === 0) {
      $('.cart>.content').html(`<div style="padding-left:10px;" class="jumbotron">
        <h1>你没有什么要买嘛？</h1>
        <p>赶快去列表页挑选商品吧</p>
        <p><a class="btn btn-default btn-lg" href="list.html" role="button">去列表页</a></p>
    </div>`);
    } else {
      // 如果gids数组有商品数据，则将该数组转为字符串,然后获取商品数据
      let ids = gids.join(',');
      getCart();
      async function getCart() {
        let {
          data
        } = await pAjax({
          url: './php/cart.php',
          data: {
            ids
          },
          dataType: 'json'
        })
        // 根据数据渲染页面
        let str = '';
        data.forEach(v => {
          let nums = cartArr.find(item => item.username === username && item.goodsId === v.id).num; // 获取到购物车的对应商品数量
          str += `<tr>
            <td><input type="checkbox" class="chk" name="selectOne"></td>
            <td><img src="${v.imgpath.split('==========')[0]}" width="50" height="50"></td>
            <td>${v.name}</td>
            <td>￥<span class="price">${v.price}</span></td>
            <td class="number" data-stock="${v.stock}" data-id="${v.id}">
                <div class="shop-num">
                    <input type="text" class="numinput" value="${nums}">
                    <a>+</a>
                    <i>-</i>
                </div>
            </td>
            <td class="subtotal">￥<span>${v.price*nums}</span></td>
            <td>
                <a class="btn btn-default  delbtn">删除</a>
            </td>
        </tr>`;
        });
        $('tbody').html(str);
        // 调用全选，单选函数
        select();
        // 调用加减按钮的点击事件绑定
        addAndRdeuce()
        // 调用移除事件绑定
        remove();


      }
    }
  }
  // 计算商品总数和商品总价
  function total() {
    let totalNum = 0; // 商品总数
    let totalPrice = 0; // 商品总价
    $('input[name=selectOne]').each((i, v) => {
      // 判断是否勾选上
      if ($(v).prop('checked')) {
        // 累加商品总数和总价
        totalNum += $(v).parent().parent().find('.number').find('input').val() - 0;
        totalPrice += $(v).parent().parent().find('.subtotal').find('span').text() - 0;
      }
    });
    // 渲染总价和总数
    $('.totalNum').text(totalNum);
    $('.totalPrice').text(totalPrice);
  }

  // 全选单选
  function select() {
    // 全选点击事件
    $('input[name=selectAll]').click(function () {
      $('input[name=selectAll]').prop('checked', $(this).prop('checked'));
      $('input[name=selectOne]').prop('checked', $(this).prop('checked'));
      total();
    });
    // 单选事件
    $('input[name=selectOne]').click(function () {
      // 将jq集合对象转为原生的数组
      let inps = Array.prototype.slice.call($('input[name=selectOne]'));
      // 判断单选元素数组是否每一个都是选中的
      let flag = inps.every(v => $(v).prop('checked'));
      $('input[name=selectAll]').prop('checked', flag);
      total();
    })
  }

  // 实现点击数量加减()
  function addAndRdeuce() {
    // 加绑定点击事件
    $('.shop-num>a').click(function () {
      $(this).prop('disabled', false);
      let num = $(this).prev().val() - 0;
      let stock = $(this).parent().parent()[0].dataset.stock - 0;
      if (num >= stock) {
        $(this).prev().val(stock);
        layer.msg('超出库存');
        $(this).prop('disabled', true);
      } else {
        $(this).prev().val(++num);
      }

      // 小计计算
      let addprice = parseInt($(this).parent().parent().prev().children().text()) * parseInt($(this).prev().val());
      $(this).parent().parent().next().children().text(addprice);
      // 修改本地购物车中的数量
      let goodsId = $(this).parent().parent()[0].dataset.id;
      let data = JSON.parse(localStorage.getItem('data'));
      let cartGoods = data.find(v => v.username === username && v.goodsId === goodsId);
      cartGoods.num = num;
      // 将修改后的data写入本地购物车
      localStorage.setItem('data', JSON.stringify(data))
    })
    // 减绑定点击事件
    $('.shop-num>i').click(function () {
      $(this).prop('disabled', false);
      let num = $(this).prev().prev().val() - 0;
      if (num <= 1) {
        $(this).prev().prev().val(1);
        layer.msg('最少1个');
        $(this).prop('disabled', true);
      } else {
        $(this).prev().prev().val(--num);
      }
      // 小计计算
      // 小计计算
      let addprice = parseInt($(this).parent().parent().prev().children().text()) * parseInt($(this).prev().prev().val());
      $(this).parent().parent().next().children().text(addprice);
      // 修改本地购物车中的数量
      let goodsId = $(this).parent().parent()[0].dataset.id;
      let data = JSON.parse(localStorage.getItem('data'));
      let cartGoods = data.find(v => v.username === username && v.goodsId === goodsId);
      cartGoods.num = num;
      // 将修改后的data写入本地购物车
      localStorage.setItem('data', JSON.stringify(data))
    })
  }

  // 点击移除
  function remove() {
    $('.delbtn').click(function () {
      // 弹出层
      layer.confirm('你真的要移除吗？', ['确定', '取消'], () => {
        // 点击确定
        // 移除当前这个点击td对应的tr
        $(this).parent().parent().remove();
        // 获取本地购物车数据
        let goodsId = $(this).parent().parent().find('.number')[0].dataset.id;
        let data = JSON.parse(localStorage.getItem('data'));
        let dataArr = data.filter(v => {
          return !(v.username === username && v.goodsId === goodsId)
        })
        // 写入购物车
        localStorage.setItem('data', JSON.stringify(dataArr));
        // 判断用户购物车中的数据是否为空
        let index = dataArr.findIndex(v => v.username === username);
        if (index == -1) {
          location.reload(); // 重新加载页面
        } else {
          layer.msg('移除成功', {
            time: 1000
          });
        }

      }, function () {
        // 点击取消
        layer.msg('已取消', {
          time: 1000
        });
      })

    })
    $('.delsum').click(function () {
      $('[name="selectOne"]:checked').each(function () {
        $(this).parent().parent().remove()

        let goodsId = $(this).parent().parent().find('.number')[0].dataset.id;
        let data = JSON.parse(localStorage.getItem('data'));
        let dataArr = data.filter(v => {
          return !(v.username === username && v.goodsId === goodsId)
        })
        // 写入localStorage
        localStorage.setItem('data', JSON.stringify(dataArr));
        // 判断用户购物车中的数据是否为空
        let index = dataArr.findIndex(v => v.username === username);
        console.log(index);
        if (index == -1) {
          location.reload(); // 重新加载页面
        } else {
          layer.msg('移除成功', {
            time: 1000
          });
        }

      });
    })
    // //购买完成删除数据
    // $('.jsbtn').click(function () {
    //     // if ($('input[name=selectOne]').prop('checked')) {
    //     //   $('body').find('tbody').find($('[name="selectOne"]:checked')).parent().parent().remove()
    //     // }
    //     console.log($('body').find('tbody')[0]);
    //     let goodsId = $('body').find('tbody').find('.number')[0].dataset.id;
    //     let data = JSON.parse(localStorage.getItem('data'));
    //     let dataArr = data.filter(v => {
    //       return !(v.username === username && v.goodsId === goodsId)
    //     })
    //     // 写入localStorage
    //     localStorage.setItem('data', JSON.stringify(dataArr));
    //     // 判断用户购物车中的数据是否为空
    //     console.log(dataArr);
    //     let index = dataArr.findIndex(v => v.username === username);
    //     console.log(index);
    //     if (index-0 == -1) {
    //       console.log(111);
    //       location.reload(); // 重新加载页面
    //     } else {
    //       layer.msg('购买成功', {
    //         time: 1000
    //       });
    //     }
    // })
    // // console.log($('.number')[0].dataset.id-0);
  }

// 恭喜，您购买成功
let btnW = document.querySelector('.jsbtn')
btnW.onclick = function () {
  layui.use('layer', function () {
    var layer = layui.layer;
    layer.msg('购买成功');
    setTimeout(() => {
      location.href = './test.html';
    }, 1000);

  });
};
})